<template>
  <div class="financeincome">
     

    	  
   <div class="income">
    <!--按钮、搜索-->
    <p class="opr">
      <!-- <el-input
              placeholder="搜索"
              v-model="query" size="mini" class="left searchIpt" @keyup.enter.native="getWalletflows">
        <i slot="suffix" class="el-input__icon el-icon-search" @click="getWalletflows"></i>
      </el-input> -->
      <el-select v-model="dicId" placeholder="最近30天" size="mini" @change='getWalletflows(true)'>
        <el-option label="最近30天" value="30"></el-option>
        <el-option label="最近15天" value="15"></el-option>
        <el-option label="最近7天" value="7"></el-option>
        <el-option label="最近3天" value="3"></el-option>
      </el-select>
        <el-select v-model="status" placeholder="事件类型" size="mini" @change='getWalletflows(true)'>
        <el-option label="事件类型" value=""></el-option>
        <el-option label="文章" value="1"></el-option>
        <el-option label="推广" value="2"></el-option>
        
      </el-select>
    </p>
    <!-- 操作区-->
 <!--    <p class="opr flexOpr">
      <span class="count">需求数（{{inde}}）</span>
    </p> -->
    <!--表格-->
    <el-table
            :data="tableData"
            :empty-text="empty"
            style="width: 100%">
      <el-table-column
              label="操作时间">
        <template slot-scope="scope">
          <p class="price" v-if="scope.row.createTime!=null">{{ scope.row.createTime | stampFormate2}}</p>
          <p class="price" v-if="scope.row.createTime==null">-</p>
        </template>
      </el-table-column>
      <el-table-column
              label="支出金额">
              <template slot-scope="scope">
                  <p>{{ scope.row.money | money}}</p>
               </template>
      </el-table-column>
      <el-table-column
              label="事件类型">
               <template slot-scope="scope">
                  <p v-if="scope.row.type==1">文章</p>
                  <p v-if="scope.row.type==2">推广</p>
               </template>
      </el-table-column>
      <el-table-column
              width = "240"
              label="需求">
              <template slot-scope="scope">
          <p class="price">{{ scope.row.demandName }}</p>
          <!-- <p class="price">{{scope.row.content}}</p> -->
        </template>
      </el-table-column>
      <el-table-column
              label="操作备注">
               <template slot-scope="scope">
              <p class="price">{{ scope.row.remark }}收入</p>
          <!-- <p class="price">{{scope.row.content}}</p> -->
        </template>
      </el-table-column>
   <!--    <el-table-column
              label="截稿日期">
        <template slot-scope="scope">
            <p>{{scope.row.endTime | stampFormate2}}</p>
        </template>
      </el-table-column> -->
      <el-table-column
              label="操作">
        <template slot-scope="scope">
            <el-button type="text" size="small" v-if="scope.row.status==1" @click="putforward(scope.row.money,scope.row.walletFlowId)">提现</el-button>
            <p v-if="scope.row.status==3">已提现</p>
            <p v-if="scope.row.status==2">提现中</p>
        </template>
      </el-table-column>
    
    </el-table>
    <!--分页-->
    <div class="v_paging">
        <el-pagination
            background
           layout="total, sizes, prev, pager, next, jumper"
           :current-page.sync="currentPage"
           @size-change="handleSizeChange"
           @current-change="handleCurrentChange"
           :total="inde">
    </el-pagination>
   </div>
    <!--弹框-->
 <el-dialog
            :title="dialog.title"
            :modal="false"
            :visible.sync="centerDialogVisible"
            center>
     
        <!--需求信息-->
        <div class="xm-item">
           
              <el-form :model="ruleForm" ref="ruleForm" class="demo-ruleForm" label-width="86px">
                  
                   <p class="v_title">银行卡信息</p>
                     <el-form-item label="银行 :" prop="title" size="mini">
                     <!-- <el-input v-model="ruleForm.bank" ></el-input> -->
                      <el-select v-model="bank" placeholder="请选择银行" @change="select()">
                           <el-option
                             v-for="item in options"
                             :key="item.id"
                             :label="item.bank + '  ' + item.cardNo"
                             :value="item.id">
                           </el-option>
                         </el-select>
                   </el-form-item>
                     <el-form-item label="开户名 :" prop="title" size="mini">
                     <p>{{ruleForm.name}}</p>
                   </el-form-item>
                     <el-form-item label="开户支行 :" prop="title" size="mini">
                     <p>{{ruleForm.subBank}}</p>
                   </el-form-item>
                   <el-form-item label="提现金额 :" prop="title" size="mini">
                     <p>{{ruleForm.money | money}}</p>
                   </el-form-item>
              
                   <el-form-item>
                     <el-button type="primary" size="mini" @click="postWithdrawflowsapply">申请</el-button>
                     <!-- <el-button type="primary" size="mini">暂存</el-button> -->
                     <el-button @click="centerDialogVisible = false" size="mini">取消</el-button>
                   </el-form-item>
                 </el-form>
      
        </div>
   
    </el-dialog>
  </div>
  



  </div>

 
</template>

<script>
    import {commonService} from '../../service/commonService'
    import {common} from '../../assets/js/common/common'
    // import CKEDITOR from "../../../src/assets/js/common/ckeditor/ckeditor"
    // let myEditor;// 富文本编辑器
  export default {
    props: [],
    data () {
      return {
        // 操作区
        status: '', // 选择需求状态
        query: '', // 查询条件
        dicId: '30', //行业状态
        // 列表
        tableData: [], //列表数据
        empty:'加载中...',
        // 分页
        currentPage:1,
        inde:1,
        pages:{
           no:1,
           size:10,
        },
      
        // 弹层
       proObj:'',          //x_需求
       articleDetail:'',  //x_详情
        dialog: {
          title: '提现',
          oprTyp: '', //操作类型：1.删除；2.审核
        },
         // 表单
        ruleForm: {
         subBank:'',
         name:'',
         money:'',
        },
        options:[],
        bank:'',
        defaultdata:'',
        walletFlowId:'',

  
        centerDialogVisible: false, // 弹框
    
      }
    },
    // components: {pagination},
    mounted () {
      this.getWalletflows()
    },
    methods: {
      //分页
      handleSizeChange(val){
          this.pages.size=val
          this.getWalletflows()
      },
      handleCurrentChange(val){
          this.pages.no=val
          this.getWalletflows()
      },
    
      //获得列表
      getWalletflows (type) {
        let that = this;
         if(type==true){
           that.currentPage=1
           that.pages.no=1
         }
        commonService.getWalletflows({pageNo: that.pages.no, pageSize:that.pages.size,type:that.status,queryTime:that.dicId}).then(function (res) { 
                  if(res.data.code==200){
                          that.tableData=res.data.datas.records
                          that.inde=res.data.datas.total
                          that.empty="暂无数据"
                  }
                  
        });
      },
      select:function(){
       
            let that=this
               commonService.getBankCardid(this.bank).then(function(res){
                   // that.pageNo++
                    if(res.data.code == 200){
                      console.log(res)
                      
                      that.defaultdata=res.data.datas
                      that.ruleForm.name=that.defaultdata.name
                      that.ruleForm.subBank=that.defaultdata.subBank
                      
                    }
              })
      },
      putforward:function(money,id){
         let that=this
         that.ruleForm.name=''
         that.ruleForm.subBank=''
         that.defaultdata=''
         that.bank=''

          commonService.getBankCard().then(function(res){
                   // that.pageNo++
                    if(res.data.code == 200){
                      // console.log(res)
                      that.options=res.data.datas        
                    }
              })
        that.ruleForm.money=money
        that.walletFlowId=id
         that.centerDialogVisible=true

      },
       postWithdrawflowsapply:function(){
             let that=this
               if(that.defaultdata==''){
                  that.$message.error("请选择银行");
                  return false
               }

               commonService.postWithdrawflowsapply({walletFlowId:that.walletFlowId,userName:that.defaultdata.name,userCardNo:that.defaultdata.cardNo,userBank:that.defaultdata.bank,userSubBank:that.defaultdata.subBank}).then(function(res){
                   // that.pageNo++
                    if(res.data.code == 200){
                      console.log(res)
                      // that.show=1
                  that.$message.success('提现申请提交成功')
                      that.centerDialogVisible=false
                      that.getWalletflows()
                      // that.defaultdata=res.data.datas
                      
                    }else{
                      that.$message.error(res.data.message);
                    }
              })

          }
 
 
       
       
     
  
    },
   
  }
</script>
<style lang="less">
  .financeincome{
    .income{
       padding: 15px;
      .searchIpt {
        width: 250px;
      }
      .opr{
        margin-bottom: 20px;
      }
      .has-gutter{
        background: #909399;
      }
      .el-table th{
        background: #eee;
      }
      .v_paging{
         margin-top: 20px;
         text-align: right;
      }
  .xm-item{
    line-height: 1.8;
    font-family: Menlo,Monaco,Consolas,Courier,monospace;
    font-size: 12px;
    padding: 18px 24px;
    margin-bottom: 20px;
    border-bottom: 1px solid #ddd;
    background-color: #fff;
    border-radius: 4px;
    -webkit-font-smoothing: auto;
    display:flex;justify-content: space-between;align-items: flex-start;
    .p.tit{min-height: 30px;line-height: 30px;font-size: 16px;color: #333;
      display:flex; justify-content: flex-start; align-items: center;
    .line{display:block;height: 14px;border-left:2px solid #66B0FF;float:left;margin-right: 8px;}
    }
    .p.des{min-height: 25px;font-size: 14px;color:#666;}
    .p.info{font-size: 12px; color:#999;}
    .left{ width: 95%; }
    .right{ width: 5%; display:flex;justify-content: space-around;align-items: flex-start;
    i:hover{color:#409EFF;cursor: pointer;}
    }
    .v_title{
       border-left: 2px solid #f29700;
       padding-left: 10px;
       margin-bottom: 20px;
       font-size: 16px;
       line-height: 18px;
    }
  }
  .el-dialog__wrapper{
       background: rgba(0, 0, 0, 0.3) !important;
    }
   .el-dialog--center{
      text-align: left;
   }
    }
  .price{width: 100%;white-space: nowrap; text-overflow:ellipsis; overflow:hidden;}
           

  }
</style>